<template>
  <basic-container>
    <basic-header title="数据统计" />
    <filter-table :option="filterOption" @handle-filter="handleFilter" />
    <el-alert style="white-space:pre" :title="leaseTitle" type="error"></el-alert>
    <e-charts :options="dataOption"></e-charts>
  </basic-container>
</template>
<script>
import FilterTable from "@/components/FilterTable";
import actionTypes from "@/const/action";
import filterOption from "@/const/filters";
import ECharts from "@/components/ECharts";
import { SyncGetStatisticsData } from "@/api/data";
import { dateFormat } from "@/util/date";
import echarts from "echarts";

const action = actionTypes.STATISTICS_DATE;
const option = filterOption[action];

const DEFAULT_CHARTS_DATA = {
  dataZoom: [
    {
      type: "inside"
    }
  ],
  tooltip: {
    formatter: function(value) {
      const [time, val] = value.value;
      return `${dateFormat(time, "yyyy-mm-dd")}</br> 成交金额: ${val}元`;
    }
  },
  xAxis: {
    type: "category",
    name: "天",
    axisLabel: {
      formatter: function(value) {
        return dateFormat(value, "yyyy-mm-dd");
      }
    }
  },
  yAxis: { name: "成交金额" },
  series: [
    {
      type: "line",
      data: [],
      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: "#83bff6" },
        { offset: 0.5, color: "#188df0" },
        { offset: 1, color: "#188df0" }
      ])
    }
  ]
};

export default {
  name: "maintain",
  components: { FilterTable, ECharts },
  data() {
    return {
      filterOption: option,
      filterData: {},
      displayData: {},
      action: actionTypes.STATISTICS_DATE,
      dataOption: DEFAULT_CHARTS_DATA
    };
  },
  computed: {
    leaseTitle() {
      return `租供订单数：${this.displayData.lease ||
        0}单                 非租供订单数：${this.displayData.notLease || 0}单`;
    }
  },
  created() {
    this.getStatisticsData();
  },
  methods: {
    handleFilter(data) {
      this.filterData = data;
      this.getStatisticsData();
    },
    async getStatisticsData() {
      const { data, error } = await SyncGetStatisticsData(
        this.action,
        this.filterData
      );

      if (error) {
        this.$message({
          type: "error",
          message: error.message || String(error)
        });
        return;
      }

      this.displayData = data.bussData;
      this.resetData();
    },
    resetData() {
      const dataArray = [];
      let resulteData = [];
      let StartTime = 0;
      let EndTime = 0;
      (this.displayData.data || []).forEach(item => {
        if (!item.gmtCreated) return;
        let nowDate = ~~(
          new Date(item.gmtCreated).getTime() / (1000 * 60 * 60 * 24) +
          0.5
        );

        if (dataArray[nowDate]) {
          dataArray[nowDate] += item.orderFee;
        } else {
          dataArray[nowDate] = item.orderFee;
        }
      });
      dataArray.forEach((value, index) => {
        if (!StartTime) StartTime = index;
        EndTime = index;
      });
      if (StartTime && EndTime) {
        for (let i = StartTime; i <= EndTime; i++) {
          let currentTime = i * 1000 * 60 * 60 * 24;
          if (dataArray[i]) {
            resulteData.push([currentTime, dataArray[i]]);
          } else {
            resulteData.push([currentTime, 0]);
          }
        }
      }
      this.dataOption = Object.assign({}, this.dataOption, {
        series: [
          {
            data: resulteData
          }
        ]
      });
    }
  }
};
</script>

